<template>
	<view class="context">
		<!-- 背景图片 -->
		<view class="backImage">
			<image :src="backImage" mode="scaleToFill" style="width: 750rpx; height: 530rpx;"></image>
			<!-- 二维码 -->
			<view class="qrCode" @click="saveImg">
				<text class="codetxt">{{userinfo.service_title}}</text>
				<canvas style="width: 350upx; height: 350upx;" canvas-id="couponQrcode"></canvas>
			</view>
		</view>
		
		<view class="txtCode">
			医生扫描二维码，填写信息后可加入诊所
		</view>
		
		<view class="saveCode" v-if="blocks">
			<view class="save">
				<text @click="saves">保存到手机</text>
				<text @click="cancel">取消</text>
			</view>
		</view>

	</view>
</template>

<script>
	const qrCode = require('@/common/weapp-qrcode.js')
	export default {
		onLoad() {
			this.userinfo = this.$store.state.userinfo;
			setTimeout(() => {
				this.couponQrCode()
			}, 50);
		},
		data() {
			return {
				// 保存二维码的遮罩处
				blocks: false,
				backImage: "http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200722/7b48c98cb63fe289bcb492456748e7be1c35f8bb.png",
				userinfo: null,

				// 图片路径
				shareImage: "",
			};
		},
		methods: {
			couponQrCode() {
				let id = this.userinfo.id.toString();
				new qrCode('couponQrcode', {
					text: id,
					width: 150,
					height: 150,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},

			cancel() {
				this.blocks = false;
			},
			// 保存二维码成功了
			saveImg() {
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
				});
				this.blocks = true;
			},

			saves() {
				try {
					uni.canvasToTempFilePath({
						canvasId: 'couponQrcode',
						success: res => {
							try {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: data => {
										console.log(`保存图片了阿布`);
										uni.showToast({
											title: '保存成功了耶',
											duration: 2000
										});
									},
									fail: err => {
										uni.showModal({
											title: "没有保存成功",
											content: JSON.stringify(err)
										});
									}
								});
							} catch (err) {
								uni.showModal({
									title: "保存的那一个刻出错了",
									content: JSON.stringify(err)
								});
							};
						},
						fail: err => {
							uni.showModal({
								title: "已经进入保存状态了，到了错误页面了",
								content: JSON.stringify(err)
							});
						}
					});
				} catch (err) {
					uni.showModal({
						title: "二维码保存成功了",
						content: JSON.stringify(err)
					});
				};
				this.blocks = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: RGBA(245, 246, 250, 1);
	}

	.context {
		background-color: RGBA(245, 246, 250, 1);

		.backImage {
			width: 750rpx;
			position: relative;

			.qrCode {
				width: calc(750rpx - 200rpx);
				height: 600rpx;
				border-radius: 20rpx;
				@include shuiping;
				bottom: -250rpx;
				background-color: #FFFFFF;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);

				canvas {
					@include shuiping;
					top: 54%;
					left: 55%;
					transform: translate(-50%, -50%);
				}

				&::before {
					display: block;
					content: "";
					color: rgba(55, 52, 56, 1);
					font-size: 40rpx;
					font-weight: bold;
					letter-spacing: 10rpx;
					text-align: center;
					@include shuiping;
				}

				&::after {
					display: block;
					content: "点击保存二维码";
					color: rgba(166, 163, 166, 1);
					font-size: 30rpx;
					text-align: center;
					@include shuiping;
					bottom: 30rpx;
				}
			}
		}

		.saveCode {
			width: 750rpx;
			height: 100vh;
			background-color: RGBA(102, 102, 102, .5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;

			.save {
				width: 750rpx;
				height: 285rpx;
				background-color: #FFFFFF;
				display: flex;
				flex-wrap: wrap;
				position: absolute;
				bottom: 0;
				left: 0;
				border-radius: 20rpx 20rpx 0 0;

				text {
					width: 100%;
					font-size: 38rpx;
					text-align: center;

					&:first-of-type {
						height: 130rpx;
						line-height: 130rpx;
						color: red;
						border-bottom: 2rpx solid RGBA(241, 241, 241, 1);
					}
				}
			}
		}
	}

	.addDoctors {
		@include dibuanniu;
		width: 650rpx;
		bottom: 70rpx;
	}

	.qrcode {
		padding: 50upx 0 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		text-align: center;
	}

	.codetxt {
		display: inline-block;
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #373438;
	}

	.txtCode {
		margin-top: 315rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(166, 163, 166, 1);
	}
</style>
